<template>
  <div class="orderDetail" v-if="orderDetail">
    <div class="step-region">
      <el-steps :active="orderDetail.status + 1" align-center>
        <el-step title="买家下单" :description="orderDetail.createTime"></el-step>
        <el-step title="买家付款" :description="orderDetail.payTime"></el-step>
        <el-step title="商家发货" :description="orderDetail.shipTime"></el-step>
        <el-step title="订单完成" :description="orderDetail.finishTime"></el-step>
      </el-steps>
    </div>
    <div class="orderInfo">
      <div class="detail">
        <ul>
          <li><label for="">订单编号：</label><span>{{orderDetail.id}}</span></li>
          <!--<li><label for="">付款方式：</label><span>余额支付</span></li>-->
          <li><label for="">买家：</label><span>{{orderDetail.receiverName}}</span></li>
          <li><label for="">配送方式：</label><span>快递</span></li>
          <li>
            <label for="">收货人：</label>
            <span>{{orderDetail.receiverProvince}}{{orderDetail.receiverCity}}{{orderDetail.receiverRegion}}{{orderDetail.receiverAddress}}，{{orderDetail.receiverName}}{{orderDetail.receiverMobile}}</span>
            <el-button type="text" data-clipboard-text="9999999" @click="copy" class="copyBtn">复制</el-button>
          </li>
        </ul>
        <el-button type="primary" size="mini" @click="edit">修改订单收货信息</el-button>
      </div>
      <div class="status">
        <div class="orderStatus">
          <label for="">订单状态：</label>
          <!--<span>待发货（买家已付款，请商家尽快发货）</span>-->
          <span>{{orderDetail.status | orderStatus}}</span>
        </div>
        <div class="operate">
          <el-button type="primary" size="mini" @click="confirm">确认发货</el-button>
          <el-button type="text" @click="remark">添加备注</el-button>
        </div>
        <div class="tip">友情提示：如果无法进行发货，请及时联系买家进行妥善处理；</div>
      </div>
    </div>
    <h3>商品信息</h3>
    <div class="goodsDetail">
      <el-table
        :data="orderDetail.goodDetailVoList"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="商品标题"
          width="275">
          <template slot-scope="scope">
            <div class="goodsInfo">
              <img :src="scope.row.picture">
              <span>{{scope.row.goodsName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="规格、编码、条码"
          width="200">
          <template slot-scope="scope">
            <div class="goodsNorm">
              <ul>
                <li>
                  <label for="">规格：</label>
                  <el-button type="primary" size="mini">{{scope.row.skuName}}</el-button>
                </li>
                <li><label for="">编码：</label><span>{{scope.row.goodsId}}</span></li>
                <li><label for="">条码：</label><span>{{scope.row.barCode}}</span></li>
              </ul>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="单价">
          <template slot-scope="scope">
            ¥{{scope.row.price.toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="数量">
          <template slot-scope="scope">
            {{scope.row.goodsNum}}个
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="原价">
          <template slot-scope="scope">
            ¥{{(scope.row.price*scope.row.goodsNum).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="折扣后">
          <template slot-scope="scope">
            ¥{{scope.row.realPrice.toFixed(2)}}
          </template>
        </el-table-column>
      </el-table>
      <div class="priceDetail">
        <ul>
          <li><label for="">商品小计：</label><span style="font-weight: bold">¥{{orderDetail.goodsAmount.toFixed(2)}}</span></li>
          <li><label for="">运费：</label><span>¥{{orderDetail.freight.toFixed(2)}}</span></li>
          <li><label for="">实付款：</label><span style="font-weight: bold;font-size: 14px;color: #e4393c;">¥{{(orderDetail.goodsAmount+orderDetail.freight).toFixed(2)}}</span></li>
        </ul>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :width="'720px'" :visible.sync="visible">
      <div :is="comp" @close="closeDialog" :orderDetail="orderDetail"></div>
    </el-dialog>
  </div>
</template>

<script>
  import receiverInfo from './component/receiverInfo.vue'
  import shipInfo from './component/shipInfo.vue'
  import remark from './component/remark.vue'
  import Clipboard from 'clipboard';
  import api from "@/api/order.service.js";

  export default {
    data() {
      return {
        visible: false,
        comp: 'receiverInfo',
        dialogTitle: '',
        tableData: [{}, {}],
        orderDetail: null
      }
    },
    computed: {
      id() {
        return this.$route.query.orderId
      }
    },
    components: {
      remark,
      shipInfo,
      receiverInfo
    },
    created() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        api.orderDetail({id:this.id}).then(res => {
          this.orderDetail = res.value
        })
      },
      edit() {
        this.dialogTitle = '编辑收货信息'
        this.comp = receiverInfo
        this.visible = true
      },
      confirm() {
        this.dialogTitle = '订单发货'
        this.comp = shipInfo
        this.visible = true
      },
      remark() {
        this.dialogTitle = '备注'
        this.comp = remark
        this.visible = true
      },
      closeDialog(flag) {
        this.visible = false
        flag ? this.getDetail() : ''
      },
      copy() {
        let clipboard = new Clipboard('.copyBtn')
        clipboard.on('success', e => {
          this.$message({
            message: '复制成功',
            type: 'success'
          });
          clipboard.destroy()
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .orderDetail {
    font-size: 12px;
    padding: 20px 30px;
    background-color: #fff;
    .step-region {
      margin-bottom: 10px;
      padding: 20px;
    }
  }

  .orderInfo {
    padding-left: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
    border: 1px solid #efefef;
    .detail {
      padding-top: 30px;
      padding-bottom: 20px;
      border-right: 1px solid #efefef;
      ul {
        display: grid;
        grid-row-gap: 20px;
        margin-bottom: 20px;
        label {
          display: inline-block;
          width: 80px;
          color: #999;
        }
      }
    }
    .status {
      padding-top: 30px;
      padding-left: 30px;
      .orderStatus {
        height: 70px;
        label {
          color: #999;
        }
      }
      .operate {
        height: 40px;
        margin-bottom: 15px;
      }
      .tip {
        color: #999;
      }
    }
  }

  h3 {
    color: #000;
    font-size: 16px;
    line-height: 62px;
    font-weight: bold;
  }

  .goodsDetail {
    .goodsInfo {
      display: grid;
      grid-template-columns: 52px auto;
      grid-column-gap: 10px;
      align-items: center;
      img {
        width: 52px;
        height: 52px;
        border: 1px solid #efefef;
        padding: 1px;
      }
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .priceDetail {
      display: grid;
      justify-content: flex-end;
      border: 1px solid #efefef;
      border-top: none;
      padding: 10px 0;
      padding-right:60px;
      color: #666;
      ul {
        display: grid;
        grid-row-gap: 10px;
        label {
          display: inline-block;
          width: 100px;
          text-align: right;
        }
        li {
        }
      }
    }
  }
</style>
